<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>训练记录</title>
    <link rel="icon" href="../static/img/icon.png">
    <link rel="stylesheet" href="../static/js/layui/css/layui.css">
    <link rel="stylesheet" href="../static/css/animate.min.css">
    <link rel="stylesheet" href="../static/css/style.css">


    <style>
        .contain-table {
            margin: 0.2rem 0.25rem;
            border: 1px solid rgb(56, 192, 255);
            border-image: linear-gradient(90deg, #7AD9F6, #0E6592) 1;
            height: calc(100% - 0.4rem);
            background: #021F2E;
        }

        .contain-table-list {
            height: calc(100% - 2.5rem);
            min-height: auto;
        }

        .contain-table-tool {
            height: 0.6rem;
        }

        .layui-layer-tabmain,
        .layui-layer-tabli {
            height: 100%;
        }

        .layui-layer-tab .layui-layer-title span {
            color: #20C4FC;
            filter: brightness(2) saturate(0) contrast(10);
        }

        .layui-layer-tab .layui-layer-title span.layui-this {
            height: 0.56rem;
            background-color: transparent;
            border: none;
            filter: none;

        }

        .chart2-switch {
            display: flex;
            align-items: center;
            color: #30a0db;
            position: absolute;
            right: 0.3rem;
            top: 0.2rem;
            z-index: 9;

            span {
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                margin-left: 0.1rem;
                text-indent: 0;
                color: #fff;
                padding: 0.02rem 0.2rem;
            }

            span.active {
                background: linear-gradient(4deg, rgba(85, 215, 207, 0.75) 0%, rgba(17, 189, 172, 0.61) 100%);
                border-radius: 0.1rem;
            }
        }


        @keyframes rotateGradient {
            0% {
                --angle: 0deg;
            }

            20% {
                --angle: 15deg;
            }

            21% {
                --angle: 150deg;
            }

            50% {
                --angle: 180deg;
            }

            70% {
                --angle: 210deg;
            }

            71% {
                --angle: 345deg;
            }

            90% {
                --angle: 345deg;
            }

            100% {
                --angle: 360deg;
            }
        }


        .contain-tab {
            height: 1.5rem;
            width: calc(100% - 0.5rem);
            margin: 0.2rem 0.25rem;
            background-color: #021F2E;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            --angle: 0deg;

            &::after {
                content: '';
                width: 100%;
                height: 100%;
                position: absolute;
                top: 1px;
                bottom: 1px;
                left: 1px;
                right: 1px;
                border: 1px solid rgb(56, 192, 255);
                border-image: linear-gradient(var(--angle), #7AD9F6, #0E6592) 1;
                animation: rotateGradient 5s linear infinite;
            }

            .tab-item {
                width: 1.88rem;
                height: 0.84rem;
                line-height: 0.84rem;
                margin: 0 0.24rem;
                text-align: center;
                color: #56F4FE;
                cursor: pointer;
                z-index: 2;
                background: url(../static/img/tabbg.png);
                background-size: 100% 100%;

                &.active,
                &:hover {
                    filter: drop-shadow(0px 0px 0.1rem #86F9BF) hue-rotate(320deg);
                    text-shadow: 2px 2px 2px #000;
                }

            }
        }

        #edit-offset {
            color: #94ecff;
            padding: 0.2rem 0.4rem;

            .layui-text {
                font-size: 0.16rem;
            }

            .layui-timeline-item::before {
                background-color: #59b2d5;
                box-shadow: 2px 2px 2px black;
            }

            .layui-timeline-axis {
                background-image: linear-gradient(30deg, #0684a8, #265177, #142a31);
                box-shadow: 1px 1px 2px #000000b0;
            }
        }

        .tab-con {
            height: 100%;
            display: flex;
            flex-direction: column;
            padding: 0.2rem;

            form {
                display: flex;
                width: 100%;
                height: 0.8rem;
                align-items: center;
            }

            .layui-table-header {
                background: #126b79;
            }

            .layui-table-view {
                margin: 0;
                position: relative;
            }

            .layui-table-page {
                bottom: -0.8rem;
            }
        }

        .chart3-score {
            height: 0.4rem;
            font-size: 0.14rem;
        }

        .chart3-score span {
            color: rgba(34, 248, 245, 1);
            margin:
                0 0.5rem 0 1.5rem;
            font-size: 0.16rem;
        }
    </style>
</head>

<body>
    <div class="app" style="overflow: hidden;">
        <div class="header animate__animated animate__slideInDown">
            <div class="header-title">训战研判系统平台</div>
            <div class="header-menu">

            </div>
        </div>
        <div class="contain">
            <div class="contain-menu animate__animated animate__slideInLeft">

            </div>

            <div class="contain-table">
                <div class="contain-tab">
                </div>
                <div class="contain-table-tool">
                    <form class="layui-form">
                        <div class="form-item">
                            <input type="text" name="personName" placeholder="训练人" class="layui-input"
                                lay-affix="clear" />
                        </div>
                        <select name="trainResult" lay-filter="type-select">
                            <option value="">训练结果</option>
                            <option value="3">优秀</option>
                            <option value="2">良好</option>
                            <option value="1">合格</option>
                            <option value="0">不合格</option>
                        </select>
                        <select name="projectId" lay-filter="projectId-select">
                        </select>
                        <div class="form-item">
                            <input type="text" name="date" placeholder="时间查询" class="layui-input" id="input-date"
                                lay-affix="clear" />
                        </div>
                        <div class="layui-btn" lay-submit lay-filter="search"><img src="../static/img/icon2.png">查询
                        </div>
                        <button type="reset" id="resetSearch"
                            class="layui-btn layui-btn-primary btn-reset layui-hide">重置</button>
                        <div class="layui-btn add" id="export" onclick="exportData()">
                            <img src="../static/img/export.png" />导出
                        </div>
                    </form>
                </div>
                <div class="contain-table-list">
                    <table id="table" lay-filter="table"></table>
                </div>

                <script type="text/html" id="tab-1">
                    <div class="tab-con">
                        <div class="contain-tab-tool">
                            <form class="layui-form" style="display: flex;width: 100%;height: 0.8rem;">
                                <div class="form-item">
                                    <select name="personName" lay-filter="person-select"   lay-search="{fuzzy: true}">
                                    </select>
                                </div>
                                <div class="form-item">
                                    <select name="seqNo"   lay-filter="seq-select"  >
                                        <option value="">位次序号</option>
                                        <option value="0">0</option>
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                        <option value="4">4</option>
                                        <option value="5">5</option>
                                        <option value="6">6</option>
                                        <option value="7">7</option>
                                        <option value="8">8</option>
                                        <option value="9">9</option>
                                        <option value="10">10</option>
                                        <option value="11">11</option>
                                    </select>
                                </div>
                                <div class="form-item">
                                    <input type="text" class="layui-input" name="meter" lay-affix="clear" placeholder="米数">
                                </div>
                                <div class="layui-btn" lay-submit lay-filter="search-record"><img src="../static/img/icon2.png">查询
                                </div>
                            </form>
                        </div>
                        <div class="contain-tab-list" style="height: calc(100% - 1rem);">
                            <table id="record-table" lay-filter="record-table"></table>
                        </div>
                    </div>
                </script>
            </div>
        </div>
    </div>



    <script type="text/javascript" src="../static/js/util/jquery.min.js"></script>
    <script type="text/javascript" src="../static/js/biz/app.js"></script>
    <script type="text/javascript" src="../static/js/layui/layui.js"></script>
    <script type="text/javascript" src="../static/js/util/echarts.min.js"></script>
    <script type="text/javascript" src="../static/js/biz/trainRecord.js"></script>
</body>

</html>